<template>
  <div>
    <!--    头订单明细-->
    <div id="ProblemHead">
      <van-icon style="float: left" name="arrow-left" size="30" @click="orderList"/>
      <span style="display: inline-block;width: 430.4px;margin-top: -52px; text-align: center; line-height: normal; vertical-align: middle;">提交申诉</span>
    </div>

    <!--    订单详情-->
    <div class="ProblemFeedback1">
      <span id="spans1">订单编号：{{Ordering.bid}}
        <img src="@/assets/复制.png" style="float: right; width: 14px; height: 16px; margin-top: 6px; margin-right: 145px;">
      </span><br>
      <span id="spans1">到达时间：{{Ordering.destinationTime}}</span><br>
      <span id="spans1">出发点：{{Ordering.fromLocation}}</span><br>
      <span id="spans1">目的地：{{Ordering.toLocation}}</span>
    </div>
    <!--    司机详情及价格-->
    <div class="ProblemFeedback2">
      <div class="ProblemFeedback22">
        <img :src="Ordering.img" alt="加载失败" style="display: block;float: left; width: 85px; height: 85px; margin-top: 13px; margin-left: 0px; border-radius: 50%;">
        <span style="display:block;width: 200px; margin-top: 20px; margin-left: 108px;text-align: left">{{Ordering.fareName}}</span><br>
        <van-rate v-model="value" :size="15" color="red" void-icon="star" void-color="#eee" style="float: left;margin-left: 17px; "/>
        <p style="display: block;float: left;margin-top: -3px;margin-left: 3px;color: red">{{value}}.0分</p>
      </div>
      <div>
        <span style="display:block;width: 200px ;margin-top: 20px; margin-left: 70px;color: red;font-size: 50px;text-align: center;">￥{{Ordering.money}}</span>
        <span style="display:block;float: left ;margin-top: -32px; margin-left: 258px;color: rgb(0 176 255);font-size: 15px;text-align: center;">明细 &gt;</span>
      </div>
      <h2 style="margin-bottom: 0">
        {{Ordering.complaint===1?'物品遗失':Ordering.complaint===2?'司机绕路':Ordering.complaint===3?
          '费用错误':Ordering.complaint===4?'下车未结束计算':Ordering.complaint===5?'未坐车却收费':Ordering.complaint===6?'司机态度差':Ordering.complaint===7?'车辆太脏':'其他'}}
      </h2>
      <span style="display: block;width: 380px;height: 105px;text-align: left;color: rgb(165 165 165)">
        {{Ordering.complaintDetails}}
      </span>
      <img src="@/assets/完成.png" style="width: 30px;height: 30px;float: left;">
      <span style="display: block;color: #ec642e;font-weight: bold;font-size: 20px;float: left;margin-left: 20px;">当前处理结果</span>
      <div style="width: 2px;height: 100px;background-color: rgb(165 165 165);margin-left: 13px;margin-top: 28px"/>
      <span style="color: rgb(165 165 165);float: left;margin-left: 55px;width: 303px;margin-top: -95px;text-align: left">您反馈的问题我们已经记录。如果反馈情况属实，司机将按照平台规则承担违规责任。</span>
      <span style="
          color: rgb(165 165 165);
          float: left;margin-left: 55px;
          width: 303px;margin-top: -20px;
          text-align: left;overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;">您的订单金额已修改为6.00元，请你核验。</span>
    </div>

    <div class="ProblemFeedback4">
      <van-field
          v-model="orderComplaint.driverAppealDescribe"
          rows="3"
          autosize
          type="textarea"
          placeholder="请在此补充说明，以便客服帮您解决问题，谢谢！"
          style="border: 1px solid #288DFB;"
      />
    </div>
    <!--    提交图片-->
    <div id="url">
<!--      <van-uploader :after-read="afterRead" v-model="driverImgurl" multiple :max-count="1"/>-->
      <van-uploader style="float: left;margin-left: 15px;" :after-read="afterRead" v-model="driverAppealImages" multiple :max-count="1"/>
    </div>
    <!--    提交反馈-->
    <div style="margin-top: 96px">
      <div class="ProblemFeedback5">
        <van-button id="toReturn" type="default"  color="#919191" style="border-radius: 50px" @click="orderList">返回</van-button>
        <van-button class="button" type="default"  color="#4EA9CB" style="width: 100%;border-radius: 50px" @click="addFeedback">提交反馈</van-button>
      </div>
    </div>

  </div>
</template>
<script>
import {addFeedback, showAllAppealById} from "@/components/api/news/news";
import axios from "axios";

export default {
  data() {
    return {
      id: null,
      value: 5.0,
      result: ['a', 'b'],
      driverAppealImages: [],
      orderComplaint:{
        driverAppealDescribe: '',
        driverAppealImages: '',
      },
      Ordering:[],
    };
  },
  methods: {
    orderList() {
      this.$router.push({path:'/newIndex',query:{name:"c"}})
    },
    afterRead(file){
      axios.post('http://localhost:8849/user/file/upload',file,{headers:{'Content-Type':'multipart/form-data'}}).then(res=>{
        this.orderComplaint.driverAppealImages=res.data.data.url;
        this.driverAppealImages[0]=res.data.data.url;
      })
    },
    AppealById() {
      this.id = this.$route.query.ides;
      showAllAppealById(this.id).then(res => {
        console.log(`ID查询的数据`,res.data);
        this.Ordering = res.data;
      })
    },
    addFeedback(){
      this.id = this.$route.query.ides;
      this.orderComplaint.orderId = this.id;
      this.orderComplaint.driverAppealImages=this.orderComplaint.driverAppealImages[0];
      addFeedback(this.orderComplaint).then(res => {
        // console.log(`状态码：`,res.data.code);
        if (res.code===200){
          this.$toast.success('提交成功');
          this.$router.push({path:'/newIndex',query:{name:"c"}})
        }
        // this.$router.push({path:'/newIndex',query:{name:"c"}})
      })
    },
  },
  created() {
    this.id = this.$route.query.ides;
    console.log('route id:', this.id);
    this.AppealById();
  }
};
</script>
<style>
#ProblemHead {
  width: 100%;
  height: 50px;
  background: white;
}

#ProblemHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#spans1 {
  font-size: 15px;
  float: left;
  color: black;
  margin-top: 5px;
  text-align: left;
}

.ProblemFeedback1 {
  margin-left: 5%;
  margin-top: 5px;
  width: 95%;
  height: 130px;
  line-height: 30px;
}

.ProblemFeedback2 {
  width: 95%;
  margin-left: 5%;
  height: 200px;
}

.ProblemFeedback22 {
  width: 430.4px;
  vertical-align: top; /* 从顶部对齐 */
  display: inline-block;
}

.ProblemFeedback4 {
  margin-left: 6%;
  width: 88%;
  margin-top: 280px;
  height: 100px;
}
.ProblemFeedback5 {
  width: 55%;
  float: right;
  display: block;
  margin-right: 5%;
  bottom: 5px;
  height: 50px;
}
#toReturn{
  width:55%;
  display: block;
  float: left;
  margin-left: -63%;
  height: 44px;
}
#url{
  width: 370px;
  height: 80px;
  float: left;
  margin-left: 5px;
}
</style>

